<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Repository: Twitter by gadaursan</title>
<style type="text/css">

body { background-color: #ffffff; }
.CI {
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
.center   {text-align: center;}
.cover    {text-align: center;}
.full     {width: 100%; }
.quarter  {width: 25%; }
.smcap    {font-variant: small-caps;}
.u        {text-decoration: underline;}
.bold     {font-weight: bold;}
</style>
</head>
<body>
<h1><a href="https://archiveofourown.org/works/22517134">Repository: Twitter</a> by <a class='authorlink' href='https://archiveofourown.org/users/gadaursan/pseuds/gadaursan'>gadaursan</a></h1>

<table class="full">

<tr><td><b>Series:</b></td><td>Repository: A Collection of Work Skins and Guides [2]</td></tr>

<tr><td><b>Category:</b></td><td>Original Work</td></tr>

<tr><td><b>Genre:</b></td><td>CSS, Fanwork Research &amp; Reference Guides, HTML, Work Skins</td></tr>

<tr><td><b>Language:</b></td><td>English</td></tr>

<tr><td><b>Status:</b></td><td>Completed</td></tr>

<tr><td><b>Published:</b></td><td>2020-02-07</td></tr>

<tr><td><b>Updated:</b></td><td>2020-03-18</td></tr>

<tr><td><b>Packaged:</b></td><td>2021-04-28 10:35:22</td></tr>

<tr><td><b>Rating:</b></td><td>General Audiences</td></tr>

<tr><td><b>Warnings:</b></td><td>No Archive Warnings Apply</td></tr>

<tr><td><b>Chapters:</b></td><td>8</td></tr>

<tr><td><b>Words:</b></td><td>7,489</td></tr>

<tr><td><b>Publisher:</b></td><td>archiveofourown.org</td></tr>

<tr><td><b>Story URL:</b></td><td>https://archiveofourown.org/works/22517134</td></tr>

<tr><td><b>Author URL:</b></td><td>https://archiveofourown.org/users/gadaursan/pseuds/gadaursan</td></tr>

<tr><td><b>Summary:</b></td><td><div class="userstuff">
              <p>A companion to Repository. A comprehensive guide to coding focused solely on emulating Twitter posts for fun or for archiving Twitter fics, up to and including:<br/>- Quote Retweets<br/>- Embedded Images<br/>- Twitter Polls</p>
            </div></td></tr>

<tr><td><b>Series:</b></td><td>Repository: A Collection of Work Skins and Guides [2]</td></tr>

<tr><td><b>Series URL:</b></td><td>https://archiveofourown.org/series/1623022</td></tr>

<tr><td><b>Comments:</b></td><td>33</td></tr>

<tr><td><b>Kudos:</b></td><td>106</td></tr>

<tr><td><b>Collections:</b></td><td>A Guide to Coding and Fanworks, Fanfiction Reference Works</td></tr>

</table>

<a name="section0001"><h2>1. An Introduction</h2></a>
<div class="story"><div class="fff_chapter_notes fff_head_notes"><b>Author's Note:</b><ul class="associations">
      <li>For <a href="https://archiveofourown.org/users/genderneutralnoun/gifts">genderneutralnoun</a>.</li>



    </ul><blockquote class="userstuff">
      <p>This work contains a work skin. Please enable "Show Creator's Style" for best results.</p>
    </blockquote></div><div class="userstuff module">
    
    <p>"I just wonder, how possible would it be to emulate polls? I can think of at least one twitter fic in which the choices the audience made (and the percentages of how many people voted for what) contributed to the narrative, and many RPers do polls for stuff. Then again I'm mostly thinking from the "converting twitter stuff to live forever on the Archive" point of view, and I'm not sure if that's what you originally intended."</p>
<p>- <a href="https://archiveofourown.org/works/8631214/comments/278084290">genderneutralnoun</a>, comment from Repository, Chapter 4</p>
<p>The other day, a commenter asked me if it was possible to emulate polls, and I got to work trying to answer that question and made this.</p>
<p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p> Lee Jordan<span class="twVerified">✔</span><br/>
<span class="twHandle">@leejordan</span></p>
  </div>
  <div class="twText">
    <p>Who won the House Cup in 1991? #Hogwarts #HHC #HouseCup</p>
  </div>
  <div class="twPoll twOpt p27">
    <p><span class="twBold">27%</span>Slytherin</p>
  </div>
  <div class="twPoll twOpt p25">
    <p><span class="twBold">25%</span>Hufflepuff</p>
  </div>
  <div class="twPoll twWin p28">
    <p><span class="twBold">28%</span>Griffindor</p>
  </div>
  <div class="twPoll twOpt p20">
    <p><span class="twBold">20%</span>Ravenclaw</p>
  </div>
  <div class="twStats">
    <p>14 votes • Final results<br/>
❤ 2<span class="twTime"> 6:06 AM • Feb 17, 2016</span></p>
  </div>
  <div class="twComments">
    <p>192 people are talking about this</p>
  </div>
</div><p>Then I got worried about cluttering my work skin from my other guide "Repository" and dealing with my old code was a real nightmare, so I decided to make a proper guide to properly overhaul the Twitter work skin to a more streamlined, modular design with more capabilities. Components like headers, polls, pictures, quote retweets are designed to be easily removed and put into the tweet.</p>
<p>Much like "Repository," this guide aims to use as much pure CSS and HTML as possible so users won't have to rely too much on outside sites to render icons and whatnot. I hope this work skin and the documentation I've written for it will be easy to understand.</p>
<p>
  <strong>The "No Coding Required" Way</strong>
</p>
<p>If you're not ready to dive into code of any kind, I've put together a tool I call the <a href="#section0008">Tweet Skin Builder</a> to make tweets much easier. Not only does this tool let you create your tweets without worrying about code, it also lets you preview what your tweet will look like as you enter it. The Tweet Skin Builder should be functioning on both mobile and desktop and is open for contributions.</p>
<p>Anyways, moving on.</p>
<p>
  <strong>What You Need</strong>
</p>
<p>Although I'll be going through the code piece by piece, this guide is meant for beginner coders who have some understanding of HTML and CSS. I don't expect you all to be computer wizards starting out, but knowing how to read HTML is a very powerful skill to have. If you are really brand new to coding, please familiarize yourself with the basics on sites like <a href="https://www.w3schools.com/"> W3 Schools</a>.</p>
<p>You should also be comfortable with setting up your own workskin, but if you need to learn that, <a href="https://archiveofourown.org/admin_posts/1370"> AO3 has documentation on how to do this</a>.</p>
<p>And since we're getting our hands dirty with code, get yourself a proper IDE to work in. And don't go trying to edit HTML on your phone. Better to be safe than sorry. I personally recommend Atom for something cross platform, clean, and lightweight, but any IDE that supports HTML and CSS will do. Feel free to leave comments below on recommendations, if you have any.</p>
<p>
  <strong>Understanding this Guide</strong>
</p>
<p>Snippets of code will be written in a different font (namely Courier). The specific parts where the user should pay attention to, whether it's for customization or a class combination, will be bolded in red as follows</p>
<p class="tut">&lt;div&gt; Hello my name is &lt;span&gt; <span class="red">Cloud</span> &lt;/span&gt;!&lt;/div&gt;</p>
<p>You will not need to copy paste anything in CSS (stuff with braces), but you should try to copy paste with the HTML snippets scattered about. This way you will learn how to pick and choose which components you need.</p>
<p>For quick reference, the HTML templates and complete CSS code dump will be placed at the end of this work complete with a changelog in case anything has been changed.</p>
<p>
  <strong>Need Help or Permission?</strong>
</p>
<p>Users are free to modify the code to however they like, no need to personally ask me, but a credit or two can go a long way.</p>
<p>As for users who are having trouble with their code, you can either leave a comment here, or message me through any of <a href="https://archiveofourown.org/users/gadaursan/profile">my listed social media accounts on my profile</a>. Please be as detailed as possible about your issue, so sharing code like a Github Gist or a Codepen link would be much appreciated.</p>
<p>
  <strong>Changelog</strong>
</p><ul>
<li>02/10/2020 - Changed opacity attribute to decimals for Safari and Firefox functionality.</li>
<li>02/18/2020 - Changed poll options background color to use opacity for dark mode site skins.</li>
<li>03/05/2020 - Refactored 'tw19VerifiedEmbed' to 'twVerifiedEmbed'.</li>
<li>03/18/2020 - Launched the "coding-free" Tweet Skin Builder</li>
<li>01/11/2021 - Due to Ao3's new image fix, embedded images no longer can bleed into the sides of the container. A quick fix has been made to prevent weird whitespace.</li>
</ul>
  </div></div>
<a name="section0002"><h2>2. Tutorial: A Simple Tweet</h2></a>
<div class="story"><div class="userstuff module">
    
    <p>In this chapter, we will make a very simple Tweet, as shown here.</p>

<p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>Euphy<span class="twVerified">✔</span><br/><span class="twHandle">@officialeuphemia</span></span>
    </p>
  </div>
  <div class="twText">
    <p>met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></p>
  </div>
  <div class="twStats">
    <p>❤ 1.2M<span class="twTime"> 6:06 PM • August 12, 2017</span></p>
  </div>
  <div class="twComments">
    <p>32.2K people are talking about this</p>
  </div>
</div><p>
  <strong>The Wrapper</strong>
</p>
<p>We begin by creating a <kbd>div</kbd> container to wrap everything up
  in a nice bow. We also want to start decorating this div with the <kbd>tw</kbd>
  and <kbd>twBody</kbd> class in CSS.</p>
<p class="tut">.tw {<br/> max-width: 400px;<br/> margin-left: auto;<br/> margin-right: auto;<br/> padding: 1em;<br/>}</p>
<p class="tut">.tw p {<br/> margin: 0;<br/> padding: 0;<br/>}</p>
<p class="tut">.twBody {<br/> border: .05em solid #ddd;<br/> border-radius: .3em;<br/>}</p>
<p>We set the container to not exceed 400px in width, center it horizontally,
  and make sure the margins and padding are correct. AO3 has a habit of stuffing
  paragraphs and line breaks depending on how you paste HTML into the editor. We
  can mitigate this by making sure the blank paragraphs take up no space in
  our tweet. We also add a small border for our container.</p>
<p>We do the following in HTML. Note how we've combined the <kbd>tw</kbd>
  and <kbd>twBody</kbd> classes.</p>

<p></p><div class="tw twBody">
  <p> </p>
</div><p class="tut">&lt;div class="<span>tw twBody</span>"&gt;<br/>&lt;/div&gt;</p>
<p>Now we can start adding compenents inside our Tweet.</p>
<p>
  <strong>The Header</strong>
</p>
<p>Next, we want to make our header which will contain the user's profile
  picture, their name, and their handle.</p>
<p>First is the Twitter user's name and handle. We use the classes <kbd>twUser</kbd>
    to make a shell for the username and <kbd>twHandle</kbd> to make this part a
    lighter color. Why, you ask, do we change the opacity of the text instead
    of just choosing a grey? All will be revealed later.</p>
<p class="tut">.twUser {<br/> font-weight: bold;<br/> font-size: larger;<br/> margin-bottom: -0.1em;<br/>}</p>
<p class="tut">.twHandle {<br/> position: relative;<br/> top: -0.5em;<br/> font-weight: normal;<br/> font-size: smaller;<br/> opacity: 0.6;<br/>}</p>
<p>Here's the HTML. Note that there are comments embedded in the HTML,
  but don't remove those. AO3 will see these empty spaces and feel obligated
  to stuff paragraphs and line breaks in between, breaking the code. Ideally,
  we wouldn't need these comments, but we want the code to be readable by humans.</p>

<p></p><div class="tw">
  <p></p>
  <div class="twUser">
    <p>
      <span>Euphy<br/><span class="twHandle">@officialeuphemia</span></span>
    </p>
  </div>
</div><p class="tut">&lt;div class="<span>twUser</span>"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;<span>Euphy</span>&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="<span>twHandle</span>"&gt;<span>@officialeuphemia</span>&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;</p>
<p>Next is the profile picture. This is one of the few parts of the work skin
    that requires external images. We will make a class for the profile called
    <kbd>twAvatar</kbd>.</p>
<p class="tut">.twAvatar {<br/> width: 40px;<br/> height: auto;<br/> float: left;<br/> margin-right: 0.3em;<br/> border-radius: 20px;<br/>}</p>
<p>This class will format the picture into a circle with a border, make it
    hug the side of its containing element. I recommend using pictures that are
    square and around 60px in case readers aren't using the skins.</p>
<table>
  <tbody>
  <tr>
  <td>
  <p></p>
  </td>
  <td>
  <p></p>
  </td>
  </tr>
  <tr>
  <td>
  <p>An unformatted image<br/>(60px x 60px)</p>
  </td>
  <td>
  <p>The same image classed<br/>as twAvatar</p>
  </td>
  </tr>
  </tbody>
  </table>
<p class="tut">&lt;img class="twAvatar" src="<span>IMAGE URL HERE</span>" /&gt;</p>
<p>We also need to make a class for a verified account icon. We call this class
    <kbd>twVerified</kbd>, which just makes a blue <kbd>span</kbd> container
    with a white check mark inside.</p>
<p class="tut">.twVerified {<br/> position: relative;<br/> bottom: 2px;<br/> display: inline-block;<br/> font-weight: normal;<br/> text-align: center;<br/> font-size: 10px;<br/> width: 15px;<br/> height: 15px;<br/> margin-left: 0.3em;<br/> background-color: #1DA1F2;<br/> color: #fff;<br/> border-radius: 50%;<br/>}</p>
<p>Now it looks like this in HTML.</p>
<p>
  <span class="twVerified">✔</span>
</p>
<p class="tut">&lt;span class="twVerified"&gt;✔&lt;/span&gt;</p>
<p>It doesn't resemble the original, but it should do the job. This is an
  optional feature, and you can remove it from later code if you like.</p>
<p>We can combine the three parts and insert them into our div container.</p>

<p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>Euphy<span class="twVerified">✔</span><br/><span class="twHandle">@officialeuphemia</span></span>
    </p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="<span>IMAGE URL HERE</span>"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;<span>Euphy&lt;span class="twVerified"&gt;✔&lt;/span&gt;</span>&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;<span>@officialeuphemia</span>&lt;/span&gt;&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;/div&gt;<br/> &lt;/div&gt;</p>
<p>So far, so good?</p>
<p>
  <strong>The Main Text</strong>
</p>
<p>The work skin is designed to make the user experience easy to use. By
  enclosing a div with the class <kbd>twText</kbd>, all selectors associated
  with the class will apply.</p>
<p class="tut">.twText span {color: #1DA1F2}</p>
<p>To enable hashtag colors, enclose hashtags in a span class, and the work skin
    will automatically color them blue, no added classes needed. This is what
    it will look like:</p>

<p></p><div class="twText">
  <p>met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></p>
</div><p class="tut">&lt;div class="twText"&gt;<span>met a really nice guy out in Area 11 and he has a cat named Arthur!!</span> &lt;span&gt;<span>#instantcrush</span>&lt;/span&gt;&lt;/div&gt;</p>
<p>We can add this to the bottom of the tweet after the header.</p>

<p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>Euphy<span class="twVerified">✔</span><br/><span class="twHandle">@officialeuphemia</span></span>
    </p>
  </div>
  <div class="twText">
    <p>met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="IMAGE URL HERE"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;Euphy&lt;span class="twVerified"&gt;✔&lt;/span&gt;&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;@officialeuphemia&lt;/span&gt;&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;/div&gt;<br/> <span>&lt;div class="twText"&gt;met a really nice guy out in Area 11 and he has a cat named Arthur!! &lt;span&gt;#instantcrush&lt;/span&gt;&lt;/div&gt;</span><br/> &lt;/div&gt;</p>
<p>Now this looks more like a Tweet, and you can honestly call it a day here,
  but we still have a few more parts to make it look a bit more authentic.</p>
<p>
  <strong>The Statistics</strong>
</p>
<p>We have the class <kbd>twStats</kbd> for the <kbd>div</kbd> containing
  the likes and timestamp. We need a bit of extra formatting on the timestamp
  so it is reasonably spaced away from the likes.</p>
<p class="tut">.twStats {<br/> width: 100%;<br/> opacity: 0.6;<br/>}</p>
<p class="tut">.twTime {<br/> padding: 0em 0em 0em 0.6em;<br/>}</p>
<p>All it does is change the opacity of the text so it's lighter colored.</p>

<p></p><div class="twStats">
  <p>❤ 4.6M<span class="twTime"> 6:06 PM • August 12, 2017</span></p>
</div><p class="tut">&lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;❤ <span>4.6M</span>&lt;span class="twTime"&gt; <span>6:06 PM • August 12, 2017</span>&lt;/span&gt;&lt;/div&gt;</p>
<p>We put this in our Tweet as follows.</p>

<p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>Euphy<span class="twVerified">✔</span><br/><span class="twHandle">@officialeuphemia</span></span>
    </p>
  </div>
  <div class="twText">
    <p>met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></p>
  </div>
  <div class="twStats">
    <p>❤ 1.2M<span class="twTime"> 6:06 PM • August 12, 2017</span></p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="IMAGE URL HERE"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;Euphy&lt;span class="twVerified"&gt;✔&lt;/span&gt;&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;@officialeuphemia&lt;/span&gt;&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;met a really nice guy out in Area 11 and he has a cat named Arthur!! &lt;span&gt;#instantcrush&lt;/span&gt;&lt;/div&gt;<br/><span>&lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;❤ 1.2M&lt;span class="twTime"&gt; 6:06 PM • August 12, 2017&lt;/span&gt;&lt;/div&gt;</span><br/> &lt;/div&gt;</p>
<p>
  <strong>The Reply Count</strong>
</p>
<p>In the embedded Tweet, replies counted at the bottom of the container, and
    we will use the <kbd>twComments</kbd> class.</p>
<p class="tut">.twComments {<br/> width: 100%;<br/> font-weight: 300;<br/> padding-top: 0.5em;<br/> margin-top: 0.5em;<br/> border-top: .05em solid #ddd;<br/>}</p>
<p>This changes the opacity of the text and makes a border on the top.</p>

<p></p><div class="tw">
  <p></p>
  <div class="twComments">
    <p>32.2K people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="twComments "&gt;<span>32.2K</span> people are talking about this&lt;/div&gt;</p>
<p>We put this at the end of our main container as the finishing touch.</p>

<p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>Euphy<span class="twVerified">✔</span><br/><span class="twHandle">@officialeuphemia</span></span>
    </p>
  </div>
  <div class="twText">
    <p>met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></p>
  </div>
  <div class="twStats">
    <p>❤ 1.2M<span class="twTime"> 6:06 PM • August 12, 2017</span></p>
  </div>
  <div class="twComments">
    <p>32.2K people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="IMAGE URL HERE"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;Euphy&lt;span class="twVerified"&gt;✔&lt;/span&gt;&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;@officialeuphemia&lt;/span&gt;&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;met a really nice guy out in Area 11 and he has a cat named Arthur!! &lt;span&gt;#instantcrush&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;❤ 1.2M&lt;span class="twTime"&gt; 6:06 PM • August 12, 2017&lt;/span&gt;&lt;/div&gt;<br/><span> &lt;div class="twComments "&gt;32.2K people are talking about this&lt;/div&gt;</span><br/> &lt;/div&gt;</p>
<p>And now we have reached the end of this tutorial with a complete Tweet.
    In the next chapter, we will learn how to integrate other kinds of content
    in our Tweet.</p>
  </div></div>
<a name="section0003"><h2>3. Pictures, Reply Tags, Quote Retweets</h2></a>
<div class="story"><div class="userstuff module">
    
    <p>In this chapter, we will make a Tweet things like pictures, single replies, and quote retweets.</p><p>
  <strong>Tweet Replies</strong>
</p><p>While this skin still doesn't allow for creating Tweet threads, you can
  indicate if a tweet has been made in reply to another tweet. We use the class
  <kbd>twReply</kbd> to style the div containing that reply. This message
  should only contain two parts: the phrase "replying to" and the handle of
  the account being replied to.</p><p class="tut">.twReply span:first-child {<br/> opacity: 0.6;<br/>}</p><p class="tut">.twReply span:last-child {<br/> color: #1DA1F2;<br/>}</p><p>The first span will always be the "replying to" phrase and is colored as
  such. The last span in this <kbd>div</kbd> will be colored like a link.</p><p></p><div class="tw">
  <p></p>
  <div class="twReply">
    <p>
      <span>replying to </span>
      <span>@officialeuphemia</span>
    </p>
  </div>
</div><p class="tut">&lt;div class="twReply"&gt;&lt;span&gt;replying to &lt;/span&gt;&lt;span&gt;<span>@officialeuphemia</span>&lt;/span&gt;&lt;/div&gt;</p><p>You can put this <kbd>div</kbd> in between the header and the text.</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>ASHFOOOOORD<br/><span class="twHandle">@greengablez</span></span>
    </p>
  </div>
  <div class="twReply">
    <p>
      <span>replying to </span>
      <span>@officialeuphemia</span>
    </p>
  </div>
  <div class="twText">
    <p>omg she's participating in <span>#hotboysummer</span> with the rest of us!</p>
  </div>
  <div class="twStats">
    <p>❤ 5<span class="twTime"> 6:10 PM • August 12, 2017</span></p>
  </div>
  <div class="twComments">
    <p>2 people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="IMAGE URL HERE"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;ASHFOOOOORD&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;@greengablez&lt;/span&gt;&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;/div&gt;<br/> <span>&lt;div class="twReply"&gt;&lt;span&gt;replying to &lt;/span&gt;&lt;span&gt;@officialeuphemia&lt;/span&gt;&lt;/div&gt;</span><br/> &lt;div class="twText"&gt;omg she's participating in &lt;span&gt;#hotboysummer&lt;/span&gt; with the rest of us!&lt;/div&gt;<br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;❤ 5&lt;span class="twTime"&gt; 6:10 PM • August 12, 2017&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;2 people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>Easy peasy lemon squeezy.</p><p>
  <strong>Tweets with Pictures</strong>
</p><p>Attaching a single image to your Tweet needs the class <kbd>twImage</kbd>.</p><p class="tut">.twImage{<br/> width: 100%;<br/> height: auto;<br/> border-radius: 0.3em;<br/> margin: 0.5em 0em 0.5em 0em;<br/>}</p><p>This will make sure the image is positioned to fit the full length
    of the tweet with rounded edges. Unlike Twitter, this won't clip the
    picture considerably.</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>Euphy<span class="twVerified">✔</span><br/><span class="twHandle">@officialeuphemia</span></span>
    </p>
  </div>
  <div class="twText">
    <p>Having a nice day out at <span>#LakeKawaguchiHotel</span> with some friends! I really really recommend the food here! It's to die for!</p>
  </div>
  
  <div class="twStats">
    <p>❤ 1.8M<span class="twTime"> 8:25 AM • August 22, 2017</span></p>
  </div>
  <div class="twComments">
    <p>135.7K people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="IMAGE URL HERE"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;Euphy&lt;span class="twVerified"&gt;✔&lt;/span&gt;&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;@officialeuphemia&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;Having a nice day out at &lt;span&gt;#LakeKawaguchiHotel&lt;/span&gt; with some friends! I really really recommend the food here! It's to die for!&lt;/div&gt;<br/><span> &lt;img class="twImage" src="IMAGE URL HERE"&gt;</span><br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;❤ 1.8M&lt;span class="twTime"&gt; 8:25 AM • August 22, 2017&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;135.7K people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>
  <strong>Quote Retweets</strong>
</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>ASHFOOOOORD<br/><span class="twHandle">@greengablez</span></span>
    </p>
  </div>
  <div class="twText">
    <p>i can't believe we're watching a fairy tale play out for real... man wish that were me</p>
  </div>
  <div class="twBody twEmbed">
    <p></p>
    <div class="twUserEmbed">
      <p>
        
        <span>Euphy<span class="twVerifiedEmbed">✔</span><span class="twHandleEmbed">@officialeuphemia</span></span>
      </p>
    </div>
    <div class="twText">
      <p>met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></p>
    </div>
  </div>
  <div class="twStats">
    <p>❤ 45<span class="twTime"> 6:20 PM • August 12, 2017</span></p>
  </div>
  <div class="twComments">
    <p>35 people are talking about this</p>
  </div>
</div><p>Quote retweets can be a little complex at first, but the work skin has been
  designed to be simple and resuse as many classes as possible. There still are
  some new classes to work with. For the outer shell of the quoted tweet, we
  use the new class <kbd>twEmbed</kbd>.</p><p class="tut">.twEmbed {<br/> min-width: 90%;<br/> position: relative;<br/> padding: 0.5em;<br/> margin-top: 0.5em;<br/> margin-bottom: 0.5em;<br/> overflow: hidden;<br/>}</p><p>By combining the classes <kbd>twBody</kbd> and <kbd>twEmbed</kbd>, we make
    a proper shell for our embedded tweet.</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>ASHFOOOOORD<br/><span class="twHandle">@greengablez</span></span>
    </p>
  </div>
  <div class="twText">
    <p>i can't believe we're watching a fairy tale play out for real... man wish that were me</p>
  </div>
  <div class="twBody twEmbed">
    <p> </p>
  </div>
  <div class="twStats">
    <p>❤ 45<span class="twTime"> 6:20 PM • August 12, 2017</span></p>
  </div>
  <div class="twComments">
    <p>35 people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="IMAGE URL HERE"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;ASHFOOOOORD&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;@greengablez&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;i can't believe we're watching a fairy tale play out for real... man wish that were me&lt;/div&gt;<br/> <span>&lt;div class="twBody twEmbed"&gt;&lt;/div&gt;</span><br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;❤ 45&lt;span class="twTime"&gt; 6:20 PM • August 12, 2017&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;35 people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>Most of the new classes are only for formatting the embedded header, so
  all these classes have "embed" at the end of it.</p><p class="tut">.twAvatarEmbed {<br/> width: 20px;<br/> height: auto;<br/> float: left;<br/> margin: 0em 0.3em .3em 0em;<br/> border-radius: 20px;<br/>}</p><p class="tut">.twUserEmbed {<br/> font-weight: bold;<br/> font-size: normal;<br/> margin-bottom: 0.5em;<br/>}</p><p class="tut">.twHandleEmbed {<br/> position: relative;<br/> font-weight: normal;<br/> opacity: 0.6;<br/> margin-left: 0.3em;<br/>}</p><p class="tut">.twVerifiedEmbed {<br/> position: relative;<br/> bottom: 2px;<br/> display: inline-block;<br/> font-weight: normal;<br/> text-align: center;<br/> font-size: 9px;<br/> width: 12px;<br/> height: 12px;<br/> margin-left: 0.3em;<br/> background-color: #1DA1F2;<br/> color: #fff;<br/> border-radius: 50%;<br/>}</p><p>Together, this makes the header of the quoted retweet as follows.</p><p></p><div class="tw">
  <p></p>
  <div class="twUserEmbed">
    <p>
      
      <span>Euphy<span class="twVerifiedEmbed">✔</span><span class="twHandleEmbed">@officialeuphemia</span></span>
    </p>
  </div>
</div><p class="tut">&lt;div class="twUserEmbed"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatarEmbed" src="<span>IMAGE URL HERE</span>"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;<span>Euphy&lt;span class="twVerifiedEmbed"&gt;✔&lt;/span&gt;</span>&lt;!---<br/> ---&gt;&lt;span class="twHandleEmbed"&gt;<span>@officialeuphemia</span>&lt;/span&gt;&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;/div&gt;</p><p>We insert this in the quoted retweet shell we made earlier. We use the same
  <kbd>twText</kbd> class for the div to make our quoted text, by the way.</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>ASHFOOOOORD<br/><span class="twHandle">@greengablez</span></span>
    </p>
  </div>
  <div class="twText">
    <p>i can't believe we're watching a fairy tale play out for real... man wish that were me</p>
  </div>
  <div class="twBody twEmbed">
    <p></p>
    <div class="twUserEmbed">
      <p>
        
        <span>Euphy<span class="twVerifiedEmbed">✔</span><span class="twHandleEmbed">@officialeuphemia</span></span>
      </p>
    </div>
    <div class="twText">
      <p>met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></p>
    </div>
  </div>
  <div class="twStats">
    <p>❤ 45<span class="twTime"> 6:20 PM • August 12, 2017</span></p>
  </div>
  <div class="twComments">
    <p>35 people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="IMAGE URL HERE"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;ASHFOOOOORD&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;@greengablez&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;i can't believe we're watching a fairy tale play out for real... man wish that were me&lt;/div&gt;<br/> &lt;div class="twBody twEmbed"&gt;<br/> <span>&lt;div class="twUserEmbed"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatarEmbed" src="IMAGE URL HERE"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;Euphy&lt;span class="twVerifiedEmbed"&gt;✔&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandleEmbed"&gt;@officialeuphemia&lt;/span&gt;&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;met a really nice guy out in Area 11 and he has a cat named Arthur!! &lt;span&gt;#instantcrush&lt;/span&gt;&lt;/div&gt;<br/> &lt;/div&gt;</span><br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;❤ 45&lt;span class="twTime"&gt; 6:20 PM • August 12, 2017&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;35 people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>To add pictures to your quoted retweet, use the <kbd>twImageEmbed</kbd>.</p><p class="tut">.twImageEmbed{<br/> width: 110%;<br/> height: auto;<br/> margin: 0.5em 0em -1em -1em;<br/>}</p><p>Compared to <kbd>twImage</kbd>, this new class will make sure the image
  overflows into the shell's sides. so some cropping in the borders can occur.</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>shirley's on vacay<br/><span class="twHandle">@greengablez</span></span>
    </p>
  </div>
  <div class="twText">
    <p>i'm like sitting across from you lmao but that looks so good euphy!!</p>
  </div>
  <div class="twBody twEmbed"><p></p><div class="twUserEmbed"><p><span>Euphy<span class="twVerifiedEmbed">✔</span><span class="twHandleEmbed">@officialeuphemia</span></span></p></div><div class="twText"><p>Having a nice day out at <span>#LakeKawaguchiHotel</span> with some friends! I really really recommend the food here! It's to die for!</p></div><br/>    </div>
  <div class="twStats">
    <p>❤ 1.1K<span class="twTime"> 8:25 PM • August 22, 2017</span></p>
  </div>
  <div class="twComments">
    <p>14.2K people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="IMAGE URL HERE"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;shirley's on vacay&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;@greengablez&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;i'm like sitting across from you lmao but that looks so good euphy!!&lt;/div&gt;<br/> &lt;div class="twBody twEmbed"&gt;<br/> &lt;div class="twUserEmbed"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatarEmbed" src="IMAGE URL HERE"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;Euphy&lt;span class="twVerifiedEmbed"&gt;✔&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandleEmbed"&gt;@officialeuphemia&lt;/span&gt;&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;Having a nice day out at &lt;span&gt;#LakeKawaguchiHotel&lt;/span&gt; with some friends! I really really recommend the food here! It's to die for!&lt;/div&gt;<br/> <span>&lt;img class="twImageEmbed" src="IMAGE URL HERE"&gt;</span><br/> &lt;/div&gt;<br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;❤ 4.8M&lt;span class="twTime"&gt; 6:20 PM • August 12, 2017&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;192 people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>And this concludes the tutorial for specific add ons. Next chapter we'll be
  learning how to write poll results.</p>
  </div></div>
<a name="section0004"><h2>4. Polls on Twitter</h2></a>
<div class="story"><div class="userstuff module">
    
    <p>In this tutorial, we will learn how to emulate Twitter polls. This can  be
  useful if your fic has a narrative about polls or if you're just trying to
  archive the poll results for interactive Twitter fics.</p><p>We will be using data from <a href="https://twitter.com/polls">@polls by
    Buzzfeed.</a></p><p>
  <strong>Active Polling</strong>
</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>polls<span class="twVerified">✔</span><br/><span class="twHandle">@polls</span></span>
    </p>
  </div>
  <div class="twText">
    <p>Would you rather let your boss see your browsing history, or let your parents see your browsing history?</p>
  </div>
  <div class="twAPoll">
    <p>Boss</p>
  </div>
  <div class="twAPoll">
    <p>Parents</p>
  </div>
  <div class="twStats">
    <p>742 votes • 4 hours left<br/>❤ 65<span class="twTime"> 7:14 PM • Aug 15, 2018</span></p>
  </div>
  <div class="twComments">
    <p>1 person is talking about this</p>
  </div>
</div><p>First we will cover how to show an active poll, meaning the results aren't in
  or the user hasn't voted yet. We will use the class <kbd>twAPoll</kbd> to
  accomplish this look.</p><p class="tut">.twAPoll {<br/> padding: .3em 0em .3em 0em;<br/> margin: .5em 0em .5em 0em;<br/> border: 0.08em solid #1DA1F2;<br/> border-radius: 1em;<br/> color: #1DA1F2;<br/> text-align: center;<br/>}</p><p>This class will do all the formatting for you. All you have to do is change
  the text to whatever you want.</p><p></p><div class="tw">
  <p></p>
  <div class="twAPoll">
    <p>Something you can choose.</p>
  </div>
</div><p class="tut">&lt;div class="twAPoll"&gt;<span>Something you can choose.</span>&lt;/div&gt;</p><p>You stack these in your Tweet, just like the elements in previous tutorials.
    No hassle.</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>polls<span class="twVerified">✔</span><br/><span class="twHandle">@polls</span></span>
    </p>
  </div>
  <div class="twText">
    <p>Would you rather let your boss see your browsing history, or let your parents see your browsing history?</p>
  </div>
  <div class="twAPoll">
    <p>Boss</p>
  </div>
  <div class="twAPoll">
    <p>Parents</p>
  </div>
  <div class="twStats">
    <p>❤ 65<span class="twTime"> 7:14 PM • Aug 15, 2018</span></p>
  </div>
  <div class="twComments">
    <p>1 person is talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="IMAGE URL" width="60px"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;polls&lt;span class="twVerified"&gt;✔&lt;/span&gt;&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;@polls&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;Would you rather let your boss see your browsing history, or let your parents see your browsing history?&lt;/div&gt;<br/> <span>&lt;div class="twAPoll"&gt;Boss&lt;/div&gt;<br/> &lt;div class="twAPoll"&gt;Parents&lt;/div&gt;</span><br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;❤ 65&lt;span class="twTime"&gt; 7:14 PM • Aug 15, 2018&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;1 person is talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>To add things like how many people already voted and how much time is left,
  you add a line into the <kbd>twStats</kbd> class. Remember not to delete those
  comments, or you'll be cursed by AO3's auto breaks.</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>polls<span class="twVerified">✔</span><br/><span class="twHandle">@polls</span></span>
    </p>
  </div>
  <div class="twText">
    <p>Would you rather let your boss see your browsing history, or let your parents see your browsing history?</p>
  </div>
  <div class="twAPoll">
    <p>Boss</p>
  </div>
  <div class="twAPoll">
    <p>Parents</p>
  </div>
  <div class="twStats">
    <p>742 votes • 4 hours left<br/>❤ 65<span class="twTime"> 7:14 PM • Aug 15, 2018</span></p>
  </div>
  <div class="twComments">
    <p>1 person is talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="IMAGE URL" width="60px"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;polls&lt;span class="twVerified"&gt;✔&lt;/span&gt;&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;@polls&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;Would you rather let your boss see your browsing history, or let your parents see your browsing history?&lt;/div&gt;<br/> &lt;div class="twAPoll"&gt;Boss&lt;/div&gt;<br/> &lt;div class="twAPoll"&gt;Parents&lt;/div&gt;<br/> &lt;div class="twStats"&gt;&lt;!---<br/><span> ---&gt;742 votes • 4 hours left&lt;br/&gt;&lt;!---</span><br/> ---&gt;❤ 65&lt;span class="twTime"&gt; 7:14 PM • Aug 15, 2018&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;1 person is talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>
  <strong>Polling Results</strong>
</p><p>Now what if we want to show the results of our poll? This is what the class
  <kbd>twPoll</kbd> is for.</p><p class="tut">.twPoll {<br/> padding: .3em 0em .3em 0em;<br/> margin: .5em 0em .5em 0em;<br/> border-radius: .3em;<br/> white-space: nowrap;<br/>}</p><p class="tut">.twPoll p{<br/> margin: 0;<br/> padding: 0;<br/>}</p><p>We also have a series of classes for the percentages
  of the votes denoted as <kbd>pN</kbd> where <kbd>N</kbd> is the percentage.
  Here is a sample <kbd>pN</kbd> class for 25% and 75%.</p><p class="tut">.p25 {width: 25%}</p><p class="tut">.p75 {width: 75%}</p><p>I won't list all the possible classes, but it should be ranged from
  <kbd>p0</kbd> and <kbd>p100</kbd>, whole numbers only. Sorry decimals, but
  please round accordingly.</p><p>The classes <kbd>twWin</kbd> and <kbd>twOpt</kbd> will give the options
  their colors, the former for the winner and the latter for everyone else.</p><p class="tut">.twWin {background-color: #74CBFB} /* Winning option color */</p><p class="tut">.twOpt {background-color: #e1e8ed} /* Other options color */</p><p>Now if you combine the three kinds of classes together, you can make a
  proper bar for your chart. There's also a class to bold and pad out the
  percentage text, but that should be easy to understand.</p><p></p><div class="tw">
  <p></p>
  <div class="twPoll twWin p75">
    <p><span class="twBold">75%</span>Winner</p>
  </div>
</div><p class="tut">&lt;div class="<span>twPoll twWin p75</span>"&gt;&lt;span class="twBold"&gt;75%&lt;/span&gt;Winner&lt;/div&gt;</p><p></p><div class="tw">
  <p></p>
  <div class="twPoll twOpt p25">
    <p><span class="twBold">25%</span>Not a Winner</p>
  </div>
</div><p class="tut">&lt;div class="<span>twPoll twOpt p25</span>"&gt;&lt;span class="twBold"&gt;25%&lt;/span&gt;Not a Winner&lt;/div&gt;</p><p>These bars can be stacked independently within the Tweet, just like the
  active poll bars.</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>polls<span class="twVerified">✔</span><br/><span class="twHandle">@polls</span></span>
    </p>
  </div>
  <div class="twText">
    <p>What is the best kind of pie?</p>
  </div>
  <div class="twPoll twWin p52">
    <p><span class="twBold">52%</span>Apple</p>
  </div>
  <div class="twPoll twOpt p14">
    <p><span class="twBold">14.2%</span>Banana Cream</p>
  </div>
  <div class="twPoll twOpt p9">
    <p><span class="twBold">9.4%</span>Meat</p>
  </div>
  <div class="twPoll twOpt p24">
    <p><span class="twBold">24.4%</span>Pumpkin</p>
  </div>
  <div class="twStats">
    <p>5484 votes • Final results<br/>❤ 65<span class="twTime"> 7:14 PM • Aug 15, 2018</span></p>
  </div>
  <div class="twComments">
    <p>20 people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="IMAGE URL" width="60px"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;polls&lt;span class="twVerified"&gt;✔&lt;/span&gt;&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;@polls&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;What is the best kind of pie?&lt;/div&gt;<br/> <span>&lt;div class="twPoll twWin p52"&gt;&lt;span class="twBold"&gt;52%&lt;/span&gt;Apple&lt;/div&gt;<br/> &lt;div class="twPoll twOpt p14"&gt;&lt;span class="twBold"&gt;14.2%&lt;/span&gt;Banana Cream&lt;/div&gt;<br/> &lt;div class="twPoll twOpt p9"&gt;&lt;span class="twBold"&gt;9.4%&lt;/span&gt;Meat&lt;/div&gt;<br/> &lt;div class="twPoll twOpt p24"&gt;&lt;span class="twBold"&gt;24.4%&lt;/span&gt;Pumpkin&lt;/div&gt;</span><br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;5484 votes • Final results&lt;br/&gt;&lt;!---<br/> ---&gt;❤ 65&lt;span class="twTime"&gt; 7:14 PM • Aug 15, 2018&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;20 people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>Beautiful, isn't it?</p><p>
  <strong>Simplified Polling</strong>
</p><p>In the case where you only want the poll, you don't need to include the
    header or the additional stats.</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twText">
    <p>Which show that ended in 2015 will you miss the most? <span>#BestOf2015</span></p>
  </div>
  <div class="twPoll twWin p54">
    <p><span class="twBold">54%</span>Parks and Rec</p>
  </div>
  <div class="twPoll twOpt p10">
    <p><span class="twBold">10.4%</span>Mad Men</p>
  </div>
  <div class="twPoll twOpt p9">
    <p><span class="twBold">9%</span>Parenthood</p>
  </div>
  <div class="twPoll twOpt p26">
    <p><span class="twBold">26.6%</span>Glee</p>
  </div>
  <div class="twStats">
    <p>14,930 votes • Final results</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twText"&gt;Which show that ended in 2015 will you miss the most? &lt;span&gt;#BestOf2015&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twPoll twWin p54"&gt;&lt;span class="twBold"&gt;54%&lt;/span&gt;Parks and Rec&lt;/div&gt;<br/> &lt;div class="twPoll twOpt p10"&gt;&lt;span class="twBold"&gt;10.4%&lt;/span&gt;Mad Men&lt;/div&gt;<br/> &lt;div class="twPoll twOpt p9"&gt;&lt;span class="twBold"&gt;9%&lt;/span&gt;Parenthood&lt;/div&gt;<br/> &lt;div class="twPoll twOpt p26"&gt;&lt;span class="twBold"&gt;26.6%&lt;/span&gt;Glee&lt;/div&gt;<br/> &lt;div class="twStats"&gt;14,930 votes • Final results&lt;/div&gt;<br/> &lt;/div&gt;</p><p>If that's not simple enough, you can also remove the border so the poll
  is seamlessly integrated into the fic. Just remove <kbd>twBody</kbd> from
  the first div.</p><p></p><div class="tw">
  <p></p>
  <div class="twText">
    <p>Which show that ended in 2015 will you miss the most? <span>#BestOf2015</span></p>
  </div>
  <div class="twPoll twWin p54">
    <p><span class="twBold">54%</span>Parks and Rec</p>
  </div>
  <div class="twPoll twOpt p10">
    <p><span class="twBold">10.4%</span>Mad Men</p>
  </div>
  <div class="twPoll twOpt p9">
    <p><span class="twBold">9%</span>Parenthood</p>
  </div>
  <div class="twPoll twOpt p26">
    <p><span class="twBold">26.6%</span>Glee</p>
  </div>
  <div class="twStats">
    <p>14,930 votes • Final results</p>
  </div>
</div><p class="tut">&lt;div <span>class="tw"</span>&gt;<br/> &lt;div class="twText"&gt;Which show that ended in 2015 will you miss the most? &lt;span&gt;#BestOf2015&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twPoll twWin p54"&gt;&lt;span class="twBold"&gt;54%&lt;/span&gt;Parks and Rec&lt;/div&gt;<br/> &lt;div class="twPoll twOpt p10"&gt;&lt;span class="twBold"&gt;10.4%&lt;/span&gt;Mad Men&lt;/div&gt;<br/> &lt;div class="twPoll twOpt p9"&gt;&lt;span class="twBold"&gt;9%&lt;/span&gt;Parenthood&lt;/div&gt;<br/> &lt;div class="twPoll twOpt p26"&gt;&lt;span class="twBold"&gt;26.6%&lt;/span&gt;Glee&lt;/div&gt;<br/> &lt;div class="twStats"&gt;14,930 votes • Final results&lt;/div&gt;<br/> &lt;/div&gt;</p><p>You can also remove twBody to remove the border for regular Tweets, too,
  in case you want that seamless look, too.</p><p></p><div class="tw">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>Euphy<span class="twVerified">✔</span><br/><span class="twHandle">@officialeuphemia</span></span>
    </p>
  </div>
  <div class="twText">
    <p>met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></p>
  </div>
  <div class="twStats">
    <p>❤ 1.2M<span class="twTime"> 6:06 PM - August 12, 2017</span></p>
  </div>
  <div class="twComments">
    <p>32.2K people are talking about this</p>
  </div>
</div><p>And this completes the tutorial for polls. Next, we'll explore how Night
  Mode works.</p>
  </div></div>
<a name="section0005"><h2>5. Night Mode</h2></a>
<div class="story"><div class="userstuff module">
    
    <p>In this tutorial, we will learn how to use Night Mode. It's actually
  really really simple. You just add the class <kbd>twNM</kbd> on the outer
  shell, and the CSS does all the work for you.</p><p>Let's do a comparison. First is the Tweet in Day Mode.</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>Euphy<span class="twVerified">✔</span><br/><span class="twHandle">@officialeuphemia</span></span>
    </p>
  </div>
  <div class="twText">
    <p>met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></p>
  </div>
  <div class="twStats">
    <p>❤ 4.6M<span class="twTime"> 6:06 PM - August 12, 2017</span></p>
  </div>
  <div class="twComments">
    <p>1.2M people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="IMAGE URL"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;Euphy&lt;span class="twVerified"&gt;✔&lt;/span&gt;&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;@officialeuphemia&lt;/span&gt;&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;met a really nice guy out in Area 11 and he has a cat named Arthur!! &lt;span&gt;#instantcrush&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;❤ 4.6M&lt;span class="twTime"&gt; 6:06 PM - August 12, 2017&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;1.2M people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>Now we add the class <kbd>twNM</kbd> for Night Mode.</p><p></p><div class="tw twNM twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>Euphy<span class="twVerified">✔</span><br/><span class="twHandle">@officialeuphemia</span></span>
    </p>
  </div>
  <div class="twText">
    <p>met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></p>
  </div>
  <div class="twStats">
    <p>❤ 4.6M<span class="twTime"> 6:06 PM - August 12, 2017</span></p>
  </div>
  <div class="twComments">
    <p>1.2M people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw <span>twNM</span> twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="IMAGE URL"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;Euphy&lt;span class="twVerified"&gt;✔&lt;/span&gt;&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;@officialeuphemia&lt;/span&gt;&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;met a really nice guy out in Area 11 and he has a cat named Arthur!! &lt;span&gt;#instantcrush&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;❤ 4.6M&lt;span class="twTime"&gt; 6:06 PM - August 12, 2017&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;1.2M people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>Notice how the text colors have been automatically changed so long as the
    class <kbd>twNM</kbd> is applied on the outermost part. The reason we
    changed the opacity of the text instead of grey is to allow the colors to
    be inverted cleanly.</p><p>So, you will not need to add <kbd>twNM</kbd> to the container of the quoted
  tweet. Let's observe the comparison first with Day Mode.</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>ASHFOOOOORD<span class="twVerified">✔</span><br/><span class="twHandle">@greengablez</span></span>
    </p>
  </div>
  <div class="twText">
    <p>i can't believe we're watching a fairy tale play out for real... man wish that were me</p>
  </div>
  <div class="twBody twEmbed">
    <p></p>
    <div class="twUserEmbed">
      <p>
        
        <span>Euphy<span class="twVerifiedEmbed">✔</span><span class="twHandleEmbed">@officialeuphemia</span></span>
      </p>
    </div>
    <div class="twText">
      <p>met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></p>
    </div>
  </div>
  <div class="twStats">
    <p>❤ 4.8M<span class="twTime"> 6:20 PM - August 12, 2017</span></p>
  </div>
  <div class="twComments">
    <p>192 people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="IMAGE URL"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;ASHFOOOOORD&lt;span class="twVerified"&gt;✔&lt;/span&gt;&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;@greengablez&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;i can't believe we're watching a fairy tale play out for real... man wish that were me&lt;/div&gt;<br/> &lt;div class="twBody twEmbed"&gt;<br/> &lt;div class="twUserEmbed"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatarEmbed" src="https://images2.imgbox.com/68/f6/3IaTRbkQ_o.png"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;Euphy&lt;span class="twVerifiedEmbed"&gt;✔&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandleEmbed"&gt;@officialeuphemia&lt;/span&gt;&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;met a really nice guy out in Area 11 and he has a cat named Arthur!! &lt;span&gt;#instantcrush&lt;/span&gt;&lt;/div&gt;<br/> &lt;/div&gt;<br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;❤ 4.8M&lt;span class="twTime"&gt; 6:20 PM - August 12, 2017&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;192 people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>Now with Night Mode.</p><p></p><div class="tw twNM twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>ASHFOOOOORD<span class="twVerified">✔</span><br/><span class="twHandle">@greengablez</span></span>
    </p>
  </div>
  <div class="twText">
    <p>i can't believe we're watching a fairy tale play out for real... man wish that were me</p>
  </div>
  <div class="twBody twEmbed">
    <p></p>
    <div class="twUserEmbed">
      <p>
        
        <span>Euphy<span class="twVerifiedEmbed">✔</span><span class="twHandleEmbed">@officialeuphemia</span></span>
      </p>
    </div>
    <div class="twText">
      <p>met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></p>
    </div>
  </div>
  <div class="twStats">
    <p>❤ 4.8M<span class="twTime"> 6:20 PM - August 12, 2017</span></p>
  </div>
  <div class="twComments">
    <p>192 people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw <span>twNM</span> twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="IMAGE URL"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;ASHFOOOOORD&lt;span class="twVerified"&gt;✔&lt;/span&gt;&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;@greengablez&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;i can't believe we're watching a fairy tale play out for real... man wish that were me&lt;/div&gt;<br/> &lt;div class="twBody twEmbed"&gt;<br/> &lt;div class="twUserEmbed"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatarEmbed" src="IMAGE URL"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;Euphy&lt;span class="twVerifiedEmbed"&gt;✔&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandleEmbed"&gt;@officialeuphemia&lt;/span&gt;&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;met a really nice guy out in Area 11 and he has a cat named Arthur!! &lt;span&gt;#instantcrush&lt;/span&gt;&lt;/div&gt;<br/> &lt;/div&gt;<br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;❤ 4.8M&lt;span class="twTime"&gt; 6:20 PM - August 12, 2017&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;192 people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>The same applies for polls. Here is the polling Tweet in Day Mode.</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>Lee Jordan<span class="twVerified">✔</span><br/><span class="twHandle">@leejordan</span></span>
    </p>
  </div>
  <div class="twText">
    <p>Who won the House Cup in 1991? <span>#Hogwarts #HHC #HouseCup</span></p>
  </div>
  <div class="twPoll twOpt p27">
    <p><span class="twBold">27%</span>Slytherin</p>
  </div>
  <div class="twPoll twOpt p25">
    <p><span class="twBold">25%</span>Hufflepuff</p>
  </div>
  <div class="twPoll twWin p28">
    <p><span class="twBold">28%</span>Griffindor</p>
  </div>
  <div class="twPoll twOpt p20">
    <p><span class="twBold">20%</span>Ravenclaw</p>
  </div>
  <div class="twStats">
    <p>14 votes • Final results<br/>❤ 2<span class="twTime"> 6:06 AM - Feb 17, 2016</span></p>
  </div>
  <div class="twComments">
    <p>192 people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="IMAGE URL"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;Lee Jordan&lt;span class="twVerified"&gt;✔&lt;/span&gt;&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;@leejordan&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;Who won the House Cup in 1991? &lt;span&gt;#Hogwarts #HHC #HouseCup&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twPoll twOpt p27"&gt;&lt;span class="twBold"&gt;27%&lt;/span&gt;Slytherin&lt;/div&gt;<br/> &lt;div class="twPoll twOpt p25"&gt;&lt;span class="twBold"&gt;25%&lt;/span&gt;Hufflepuff&lt;/div&gt;<br/> &lt;div class="twPoll twWin p28"&gt;&lt;span class="twBold"&gt;28%&lt;/span&gt;Griffindor&lt;/div&gt;<br/> &lt;div class="twPoll twOpt p20"&gt;&lt;span class="twBold"&gt;20%&lt;/span&gt;Ravenclaw&lt;/div&gt;<br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;14 votes • Final results&lt;br/&gt;&lt;!---<br/> ---&gt;❤ 2&lt;span class="twTime"&gt; 6:06 AM - Feb 17, 2016&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;192 people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>Now for Night Mode. While the winning color will stay the same, the other
    options are actually a tad darker than the day mode color. The CSS will
    automatically deal with this.</p><p></p><div class="tw twNM twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>Lee Jordan<span class="twVerified">✔</span><br/><span class="twHandle">@leejordan</span></span>
    </p>
  </div>
  <div class="twText">
    <p>Who won the House Cup in 1991? <span>#Hogwarts #HHC #HouseCup</span></p>
  </div>
  <div class="twPoll twOpt p27">
    <p><span class="twBold">27%</span>Slytherin</p>
  </div>
  <div class="twPoll twOpt p25">
    <p><span class="twBold">25%</span>Hufflepuff</p>
  </div>
  <div class="twPoll twWin p28">
    <p><span class="twBold">28%</span>Griffindor</p>
  </div>
  <div class="twPoll twOpt p20">
    <p><span class="twBold">20%</span>Ravenclaw</p>
  </div>
  <div class="twStats">
    <p>14 votes • Final results<br/>❤ 2<span class="twTime"> 6:06 AM - Feb 17, 2016</span></p>
  </div>
  <div class="twComments">
    <p>192 people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw <span>twNM</span> twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="IMAGE URL"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;Lee Jordan&lt;span class="twVerified"&gt;✔&lt;/span&gt;&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;@leejordan&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;Who won the House Cup in 1991? &lt;span&gt;#Hogwarts #HHC #HouseCup&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twPoll twOpt p27"&gt;&lt;span class="twBold"&gt;27%&lt;/span&gt;Slytherin&lt;/div&gt;<br/> &lt;div class="twPoll twOpt p25"&gt;&lt;span class="twBold"&gt;25%&lt;/span&gt;Hufflepuff&lt;/div&gt;<br/> &lt;div class="twPoll twWin p28"&gt;&lt;span class="twBold"&gt;28%&lt;/span&gt;Griffindor&lt;/div&gt;<br/> &lt;div class="twPoll twOpt p20"&gt;&lt;span class="twBold"&gt;20%&lt;/span&gt;Ravenclaw&lt;/div&gt;<br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;14 votes • Final results&lt;br/&gt;&lt;!---<br/> ---&gt;❤ 2&lt;span class="twTime"&gt; 6:06 AM - Feb 17, 2016&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;192 people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>And this concludes the tutorial for using Night Mode. I'm not entirely
  sure what this could be used for aside from aesthetic purposes, but I like
  Night Mode on my UIs, so maybe you do, too.</p>
  </div><div class="fff_chapter_notes fff_foot_notes"><b>Notes for the Chapter:</b><blockquote class="userstuff">
          <p>This is the end of the tutorials as of now. While this fic is marked as complete, if and when I do decide to add new features, I will add additional chapters as well as general FAQ. Feel free to leave comments or questions below, and I will address them as promptly as I can.</p>
        </blockquote></div></div>
<a name="section0006"><h2>6. HTML Templates</h2></a>
<div class="story"><div class="fff_chapter_notes fff_head_notes"><b>Notes for the Chapter:</b><blockquote class="userstuff"><p>These are quick reference templates in one spot. Simple copy paste and fill in what you need. The red bolded sections are the preferences you should be changing.</p></blockquote></div><div class="userstuff module">
    
    <p>These are quick reference templates in one spot. Simple copy paste and
  fill in what you need.</p><p>
  <strong>Simple Twitter Post</strong>
</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>Euphy<span class="twVerified">✔</span><br/><span class="twHandle">@officialeuphemia</span></span>
    </p>
  </div>
  <div class="twText">
    <p>met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></p>
  </div>
  <div class="twStats">
    <p>❤ 1.2M<span class="twTime"> 6:06 PM • August 12, 2017</span></p>
  </div>
  <div class="twComments">
    <p>32.2K people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="<span>IMAGE URL</span>"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;<span>TWITTER NAME&lt;span class="twVerified"&gt;✔&lt;/span&gt;</span>&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;<span>TWITTER HANDLE</span>&lt;/span&gt;&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;<span>MAIN TEXT</span> &lt;span&gt;<span>#HASHTAG</span>&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;❤ <span>LIKES</span>&lt;span class="twTime"&gt; <span>TIME AND DATE</span>&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;<span>REPLY COUNT</span> people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>
  <strong>Twitter Post as Reply</strong>
</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>ASHFOOOOORD<span class="twVerified">✔</span><br/><span class="twHandle">@greengablez</span></span>
    </p>
  </div>
  <div class="twReply">
    <p>
      <span>replying to </span>
      <span>@officialeuphemia</span>
    </p>
  </div>
  <div class="twText">
    <p>omg she's participating in <span>#hotboysummer</span> with the rest of us!</p>
  </div>
  <div class="twStats">
    <p>❤ 5<span class="twTime"> 6:10 PM • August 12, 2017</span></p>
  </div>
  <div class="twComments">
    <p>2 people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="<span>IMAGE URL</span>"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;<span>TWITTER NAME&lt;span class="twVerified"&gt;✔&lt;/span&gt;</span>&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;<span>TWITTER HANDLE</span>&lt;/span&gt;&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;/div&gt;<br/> &lt;div class="twReply"&gt;&lt;span&gt;replying to &lt;/span&gt;&lt;span&gt;<span>TWITTER HANDLE</span>&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;<span>MAIN TEXT</span> &lt;span&gt;<span>#HASHTAG</span>&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;❤ <span>LIKES</span>&lt;span class="twTime"&gt; <span>TIME AND DATE</span>&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;<span>REPLY COUNT</span> people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>
  <strong>Twitter Post with Picture</strong>
</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>Euphy<span class="twVerified">✔</span><br/><span class="twHandle">@officialeuphemia</span></span>
    </p>
  </div>
  <div class="twText">
    <p>Having a nice day out at <span>#LakeKawaguchiHotel</span> with some friends! I really really recommend the food here! It's to die for!</p>
  </div>
  
  <div class="twStats">
    <p>❤ 1.8M<span class="twTime"> 8:25 AM • August 22, 2017</span></p>
  </div>
  <div class="twComments">
    <p>135.7K people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="<span>IMAGE URL</span>"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;<span>TWITTER NAME&lt;span class="twVerified"&gt;✔&lt;/span&gt;</span>&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;<span>TWITTER HANDLE</span>&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;<span>TWITTER TEXT</span>&lt;span&gt;<span>#HASHTAG</span>&lt;/span&gt;&lt;/div&gt;<br/> &lt;img class="twImage" src="<span>IMAGE URL</span>"&gt;<br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;❤ <span>LIKES</span>&lt;span class="twTime"&gt; <span>TIME AND DATE</span>&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;<span>REPLY COUNT</span> people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>
  <strong>Twitter Quote Retweet</strong>
</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>ASHFOOOOORD<span class="twVerified">✔</span><br/><span class="twHandle">@greengablez</span></span>
    </p>
  </div>
  <div class="twText">
    <p>i can't believe we're watching a fairy tale play out for real... man wish that were me</p>
  </div>
  <div class="twBody twEmbed">
    <p></p>
    <div class="twUserEmbed">
      <p>
        
        <span>Euphy<span class="twVerifiedEmbed">✔</span><span class="twHandleEmbed">@officialeuphemia</span></span>
      </p>
    </div>
    <div class="twText">
      <p>met a really nice guy out in Area 11 and he has a cat named Arthur!! <span>#instantcrush</span></p>
    </div>
  </div>
  <div class="twStats">
    <p>❤ 45<span class="twTime"> 6:20 PM • August 12, 2017</span></p>
  </div>
  <div class="twComments">
    <p>35 people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="<span>IMAGE URL</span>"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;<span>TWITTER NAME&lt;span class="twVerified"&gt;✔&lt;/span&gt;</span>&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;<span>TWITTER HANDLE</span>&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;<span>TEXT HERE</span>&lt;/div&gt;<br/> &lt;div class="twBody twEmbed"&gt;<br/> &lt;div class="twUserEmbed"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatarEmbed" src="<span>IMAGE URL</span>"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;<span>TWITTER NAME&lt;span class="twVerifiedEmbed"&gt;✔&lt;/span&gt;</span>&lt;!---<br/> ---&gt;&lt;span class="twHandleEmbed"&gt;<span>TWITTER HANDLE</span>&lt;/span&gt;&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;<span>TEXT HERE</span>&lt;/div&gt;<br/> &lt;/div&gt;<br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;❤ <span>LIKES</span>&lt;span class="twTime"&gt; <span>DATE AND TIME</span>&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;<span>REPLY COUNT</span> people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>
  <strong>Twitter Quote Retweet with Picture</strong>
</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>shirley's on vacay<span class="twVerified">✔</span><br/><span class="twHandle">@greengablez</span></span>
    </p>
  </div>
  <div class="twText">
    <p>i'm like sitting across from you lmao but that looks so good euphy!!</p>
  </div>
  <div class="twBody twEmbed"><p></p><div class="twUserEmbed"><p><span>Euphy<span class="twVerifiedEmbed">✔</span><span class="twHandleEmbed">@officialeuphemia</span></span></p></div><div class="twText"><p>Having a nice day out at <span>#LakeKawaguchiHotel</span> with some friends! I really really recommend the food here! It's to die for!</p></div><br/>    </div>
  <div class="twStats">
    <p>❤ 4.8M<span class="twTime"> 6:20 PM • August 12, 2017</span></p>
  </div>
  <div class="twComments">
    <p>192 people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="<span>IMAGE URL</span>"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;<span>TWITTER NAME&lt;span class="twVerified"&gt;✔&lt;/span&gt;</span>&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;<span>TWITTER HANDLE</span>&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;<span>TEXT HERE</span>&lt;/div&gt;<br/>&lt;div class="twBody twEmbed"&gt;<br/> &lt;div class="twUserEmbed"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatarEmbed" src="<span>IMAGE URL</span>"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;<span>TWITTER NAME&lt;span class="twVerifiedEmbed"&gt;✔&lt;/span&gt;</span>&lt;!---<br/> ---&gt;&lt;span class="twHandleEmbed"&gt;<span>TWITTER HANDLE</span>&lt;/span&gt;&lt;/span&gt;&lt;!---<br/> ---&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;<span>TEXT HERE</span>&lt;/div&gt;<br/> &lt;img class="twImageEmbed" src="<span>IMAGE URL</span>"&gt;<br/> &lt;/div&gt;<br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;❤ <span>LIKES</span>&lt;span class="twTime"&gt; <span>DATE AND TIME</span>&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;<span>REPLY COUNT</span> people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>
  <strong>Active Twitter Polling</strong>
</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>Lee Jordan<span class="twVerified">✔</span><br/><span class="twHandle">@leejordan</span></span>
    </p>
  </div>
  <div class="twText">
    <p>Who won the House Cup in 1991? <span>#Hogwarts #HHC #HouseCup</span></p>
  </div>
  <div class="twAPoll">
    <p>Slytherin</p>
  </div>
  <div class="twAPoll">
    <p>Hufflepuff</p>
  </div>
  <div class="twAPoll">
    <p>Griffindor</p>
  </div>
  <div class="twAPoll">
    <p>Ravenclaw</p>
  </div>
  <div class="twStats">
    <p>14 votes • Final results<br/>❤ 2<span class="twTime"> 6:06 AM • Feb 17, 2016</span></p>
  </div>
  <div class="twComments">
    <p>192 people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="<span>IMAGE URL</span>"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;<span>TWITTER NAME&lt;span class="twVerified"&gt;✔&lt;/span&gt;</span>&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;<span>TWITTER HANDLE</span>&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twText"&gt;<span>TEXT HERE</span>&lt;/div&gt;<br/> &lt;div class="twAPoll"&gt;<span>TEXT HERE</span>&lt;/div&gt;<br/> &lt;div class="twAPoll"&gt;<span>TEXT HERE</span>&lt;/div&gt;<br/> &lt;div class="twAPoll"&gt;<span>TEXT HERE</span>&lt;/div&gt;<br/> &lt;div class="twAPoll"&gt;<span>TEXT HERE</span>&lt;/div&gt;<br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;<span>VOTING STATS HERE</span>&lt;br/&gt;&lt;!---<br/> ---&gt;❤ <span>LIKES</span>&lt;span class="twTime"&gt; <span>DATE AND TIME</span>&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;<span>REPLY COUNT</span> people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>
  <strong>Twitter Poll Results</strong>
</p><p></p><div class="tw twBody">
  <p></p>
  <div class="twUser">
    <p>
      
      <span>Lee Jordan<span class="twVerified">✔</span><br/><span class="twHandle">@leejordan</span></span>
    </p>
  </div>
  <div class="twText">
    <p>Who won the House Cup in 1991? <span>#Hogwarts #HHC #HouseCup</span></p>
  </div>
  <div class="twPoll twOpt p27">
    <p><span class="twBold">27%</span>Slytherin</p>
  </div>
  <div class="twPoll twOpt p25">
    <p><span class="twBold">25%</span>Hufflepuff</p>
  </div>
  <div class="twPoll twWin p28">
    <p><span class="twBold">28%</span>Griffindor</p>
  </div>
  <div class="twPoll twOpt p20">
    <p><span class="twBold">20%</span>Ravenclaw</p>
  </div>
  <div class="twStats">
    <p>14 votes • Final results<br/>❤ 2<span class="twTime"> 6:06 AM • Feb 17, 2016</span></p>
  </div>
  <div class="twComments">
    <p>192 people are talking about this</p>
  </div>
</div><p class="tut">&lt;div class="tw twBody"&gt;<br/> &lt;div class="twUser"&gt;&lt;!---<br/> ---&gt;&lt;img class="twAvatar" src="<span>IMAGE URL</span>"&gt;&lt;!---<br/> ---&gt;&lt;span&gt;<span>TWITTER NAME&lt;span class="twVerified"&gt;✔&lt;/span&gt;</span>&lt;br/&gt;&lt;!---<br/> ---&gt;&lt;span class="twHandle"&gt;<span>TWITTER HANDLE</span>&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="<span>twPoll twOpt p100</span>"&gt;&lt;span class="twBold"&gt;<span>PERCENTAGE</span>&lt;/span&gt;<span>TEXT HERE</span>&lt;/div&gt;<br/> &lt;div class="<span>twPoll twOpt p100</span>"&gt;&lt;span class="twBold"&gt;<span>PERCENTAGE</span>&lt;/span&gt;<span>TEXT HERE</span>&lt;/div&gt;<br/> &lt;div class="<span>twPoll twWin p100</span>"&gt;&lt;span class="twBold"&gt;<span>PERCENTAGE</span>&lt;/span&gt;<span>TEXT HERE</span>&lt;/div&gt;<br/> &lt;div class="<span>twPoll twOpt p100</span>"&gt;&lt;span class="twBold"&gt;<span>PERCENTAGE</span>&lt;/span&gt;<span>TEXT HERE</span>&lt;/div&gt;<br/> &lt;div class="twStats"&gt;&lt;!---<br/> ---&gt;<span>VOTING STATS HERE</span>&lt;br/&gt;&lt;!---<br/> ---&gt;❤ <span>LIKES</span>&lt;span class="twTime"&gt; <span>DATE AND TIME</span>&lt;/span&gt;&lt;/div&gt;<br/> &lt;div class="twComments "&gt;<span>REPLY COUNT</span> people are talking about this&lt;/div&gt;<br/> &lt;/div&gt;</p><p>
  <strong>Minimalistic Twitter Polling</strong>
</p><p></p><div class="tw">
  <p></p>
  <div class="twPoll twOpt p7">
    <p><span class="twBold">7%</span>Absolutely spotless.</p>
  </div>
  <div class="twPoll twWin p84">
    <p><span class="twBold">84%</span>Can't find my phone?</p>
  </div>
  <div class="twPoll twOpt p29">
    <p><span class="twBold">29%</span>Decked out!</p>
  </div>
  <div class="twStats">
    <p>14 votes • Final results</p>
  </div>
</div><p class="tut">&lt;div class="twSoloPoll"&gt;<br/> &lt;div class="<span>twPoll twOpt p100</span>"&gt;&lt;span class="twBold"&gt;<span>PERCENTAGE</span>&lt;/span&gt;<span>TEXT HERE</span>&lt;/div&gt;<br/> &lt;div class="<span>twPoll twOpt p100</span>"&gt;&lt;span class="twBold"&gt;<span>PERCENTAGE</span>&lt;/span&gt;<span>TEXT HERE</span>&lt;/div&gt;<br/> &lt;div class="<span>twPoll twWin p100</span>"&gt;&lt;span class="twBold"&gt;<span>PERCENTAGE</span>&lt;/span&gt;<span>TEXT HERE</span>&lt;/div&gt;<br/> &lt;div class="<span>twPoll twOpt p100</span>"&gt;&lt;span class="twBold"&gt;<span>PERCENTAGE</span>&lt;/span&gt;<span>TEXT HERE</span>&lt;/div&gt;<br/> &lt;div class="twStats"&gt;<span>VOTING STATS HERE</span>&lt;/div&gt;<br/> &lt;/div&gt;</p>
  </div></div>
<a name="section0007"><h2>7. CSS Code Dump</h2></a>
<div class="story"><div class="fff_chapter_notes fff_head_notes"><b>Summary for the Chapter:</b><blockquote class="userstuff">
            <p>This is the full CSS Code Dump. The code for each component has been separated by comments for easy reading.</p>
          </blockquote></div><div class="userstuff module">
    
    <p class="tut"><span>/*The general Tweet container.*/</span><br/>
.tw {<br/>
max-width: 400px;<br/>
margin-left: auto;<br/>
margin-right: auto;<br/>
padding: 1em;<br/>
}</p><p class="tut">.tw p {<br/>
margin: 0;<br/>
padding: 0;<br/>
}</p><p class="tut">.twBody {<br/>
border: .05em solid #ddd;<br/>
border-radius: .3em;<br/>
}</p><p class="tut">.twEmbed {<br/>
min-width: 90%;<br/>
position: relative;<br/>
padding: 0.5em;<br/>
margin-top: 0.5em;<br/>
margin-bottom: 0.5em;<br/>
overflow: hidden;<br/>
}</p><p class="tut"><span>/*Avatars are automatically formatted to be circles*/</span><br/>
.twAvatar {<br/>
width: 40px;<br/>
height: auto;<br/>
float: left;<br/>
margin-right: 0.3em;<br/>
border-radius: 20px;<br/>
}</p><p class="tut">.twAvatarEmbed {<br/>
width: 20px;<br/>
height: auto;<br/>
float: left;<br/>
margin: 0em 0.3em .3em 0em;<br/>
border-radius: 20px;<br/>
}</p><p class="tut">
    <span>/*Formatting for the Verified Icons*/</span>
  </p><p class="tut">.twVerified {<br/>
position: relative;<br/>
bottom: 2px;<br/>
display: inline-block;<br/>
font-weight: normal;<br/>
text-align: center;<br/>
font-size: 10px;<br/>
width: 15px;<br/>
height: 15px;<br/>
margin-left: 0.3em;<br/>
background-color: #1DA1F2;<br/>
color: #fff;<br/>
border-radius: 50%;<br/>
}</p><p class="tut">.twVerifiedEmbed {<br/>
position: relative;<br/>
bottom: 2px;<br/>
display: inline-block;<br/>
font-weight: normal;<br/>
text-align: center;<br/>
font-size: 9px;<br/>
width: 12px;<br/>
height: 12px;<br/>
margin-left: 0.3em;<br/>
background-color: #1DA1F2;<br/>
color: #fff;<br/>
border-radius: 50%;<br/>
}</p><p class="tut"><span>/* Images */</span><br/>
.twImage{<br/>
width: 100%;<br/>
height: auto;<br/>
border-radius: 0.3em;<br/>
margin: 0.5em 0em 0.5em 0em;<br/>
}</p><p class="tut">.twImageEmbed{<br/>
border-radius: 0.3em;<br/>
margin-top: 0.5em;<br/>
}</p><p class="tut"><span>/* Formatting for Header and Text */</span><br/>
.twUser {<br/>
font-weight: bold;<br/>
font-size: larger;<br/>
margin-bottom: -0.1em;<br/>
}</p><p class="tut">.twUserEmbed {<br/>
font-weight: bold;<br/>
font-size: normal;<br/>
margin-bottom: 0.5em;<br/>
}</p><p class="tut">.twHandle {<br/>
position: relative;<br/>
top: -0.5em;<br/>
font-weight: normal;<br/>
font-size: smaller;<br/>
opacity: 0.6;<br/>
}</p><p class="tut">.twHandleEmbed {<br/>
position: relative;<br/>
font-weight: normal;<br/>
opacity: 0.6;<br/>
margin-left: 0.3em;<br/>
}</p><p class="tut">.twText span {<br/>
color: #1DA1F2;<br/>
}</p><p class="tut"><span>/*Formatting for the span of the like count and timestamp*/</span><br/>
.twStats {<br/>
width: 100%;<br/>
opacity: 0.6;<br/>
}</p><p class="tut">.twTime {<br/>
padding: 0em 0em 0em 0.6em;<br/>
}</p><p class="tut"><span>/*Formatting for Comments*/</span><br/>
.twComments {<br/>
width: 100%;<br/>
font-weight: 300;<br/>
padding-top: 0.5em;<br/>
margin-top: 0.5em;<br/>
border-top: .05em solid #ddd;<br/>
color: #1DA1F2;<br/>
}</p><p class="tut"><span>/*Formatting for Reply Tag*/</span><br/>
.twReply span:first-child {<br/>
opacity: 0.6;<br/>
}</p><p class="tut">.twReply span:last-child {<br/>
color: #1DA1F2;<br/>
}</p><p class="tut"><span>/*Formatting for Polling Results*/</span><br/>
.twPoll p{<br/>
margin: 0;<br/>
padding: 0;<br/>
}</p><p class="tut">.twPoll {<br/>
padding: .3em 0em .3em 0em;<br/>
margin: .5em 0em .5em 0em;<br/>
border-radius: .3em;<br/>
white-space: nowrap;<br/>
}</p><p class="tut"><span>/*Formatting for Active Polling*/</span><br/>
.twAPoll {<br/>
padding: .3em 0em .3em 0em;<br/>
margin: .5em 0em .5em 0em;<br/>
border: 0.08em solid #1DA1F2;<br/>
border-radius: 1em;<br/>
color: #1DA1F2;<br/>
text-align: center;<br/>
}</p><p class="tut"><span>/*Defines the colors and formats of certain elements*/</span><br/>
.twWin {background-color: rgba(0, 149, 235, 0.5)} /* Winning option color */<br/>
.twOpt {background-color: rgba(187, 198, 206, 0.5)} /* Other options color */<br/>
/* Night mode */<br/>
.twNM { background-color: #14242C; color: #fff; border-color: #3B5364; }<br/>
.twNM .twBody { border-color: #3B5364 }<br/>
.twNM .twComments { border-top: .05em solid #3B5364}<br/>
.twNM .twWin {background-color: #74cbfb}<br/>
.twNM .twOpt {background-color: #3B5364} /* Other Options Color Night Mode*/<br/>
.twBold {font-weight: bold; padding-right: 10px; padding-left: 10px;}
</p><p class="tut"><span>/*Percentage Presets*/</span><br/>
.p0 {width: 0%}<br/>
.p1 {width: 1%}<br/>
.p2 {width: 2%}<br/>
.p3 {width: 3%}<br/>
.p4 {width: 4%}<br/>
.p5 {width: 5%}<br/>
.p6 {width: 6%}<br/>
.p7 {width: 7%}<br/>
.p8 {width: 8%}<br/>
.p9 {width: 9%}<br/>
.p10 {width: 10%}<br/>
.p11 {width: 11%}<br/>
.p12 {width: 12%}<br/>
.p13 {width: 13%}<br/>
.p14 {width: 14%}<br/>
.p15 {width: 15%}<br/>
.p16 {width: 16%}<br/>
.p17 {width: 17%}<br/>
.p18 {width: 18%}<br/>
.p19 {width: 19%}<br/>
.p20 {width: 20%}<br/>
.p21 {width: 21%}<br/>
.p22 {width: 22%}<br/>
.p23 {width: 23%}<br/>
.p24 {width: 24%}<br/>
.p25 {width: 25%}<br/>
.p26 {width: 26%}<br/>
.p27 {width: 27%}<br/>
.p28 {width: 28%}<br/>
.p29 {width: 29%}<br/>
.p30 {width: 30%}<br/>
.p31 {width: 31%}<br/>
.p32 {width: 32%}<br/>
.p33 {width: 33%}<br/>
.p34 {width: 34%}<br/>
.p35 {width: 35%}<br/>
.p36 {width: 36%}<br/>
.p37 {width: 37%}<br/>
.p38 {width: 38%}<br/>
.p39 {width: 39%}<br/>
.p40 {width: 40%}<br/>
.p41 {width: 41%}<br/>
.p42 {width: 42%}<br/>
.p43 {width: 43%}<br/>
.p44 {width: 44%}<br/>
.p45 {width: 45%}<br/>
.p46 {width: 46%}<br/>
.p47 {width: 47%}<br/>
.p48 {width: 48%}<br/>
.p49 {width: 49%}<br/>
.p50 {width: 50%}<br/>
.p51 {width: 51%}<br/>
.p52 {width: 52%}<br/>
.p53 {width: 53%}<br/>
.p54 {width: 54%}<br/>
.p55 {width: 55%}<br/>
.p56 {width: 56%}<br/>
.p57 {width: 57%}<br/>
.p58 {width: 58%}<br/>
.p59 {width: 59%}<br/>
.p60 {width: 60%}<br/>
.p61 {width: 61%}<br/>
.p62 {width: 62%}<br/>
.p63 {width: 63%}<br/>
.p64 {width: 64%}<br/>
.p65 {width: 65%}<br/>
.p66 {width: 66%}<br/>
.p67 {width: 67%}<br/>
.p68 {width: 68%}<br/>
.p69 {width: 69%}<br/>
.p70 {width: 70%}<br/>
.p71 {width: 71%}<br/>
.p72 {width: 72%}<br/>
.p73 {width: 73%}<br/>
.p74 {width: 74%}<br/>
.p75 {width: 75%}<br/>
.p76 {width: 76%}<br/>
.p77 {width: 77%}<br/>
.p78 {width: 78%}<br/>
.p79 {width: 79%}<br/>
.p80 {width: 80%}<br/>
.p81 {width: 81%}<br/>
.p82 {width: 82%}<br/>
.p83 {width: 83%}<br/>
.p84 {width: 84%}<br/>
.p85 {width: 85%}<br/>
.p86 {width: 86%}<br/>
.p87 {width: 87%}<br/>
.p88 {width: 88%}<br/>
.p89 {width: 89%}<br/>
.p90 {width: 90%}<br/>
.p91 {width: 91%}<br/>
.p92 {width: 92%}<br/>
.p93 {width: 93%}<br/>
.p94 {width: 94%}<br/>
.p95 {width: 95%}<br/>
.p96 {width: 96%}<br/>
.p97 {width: 97%}<br/>
.p98 {width: 98%}<br/>
.p99 {width: 99%}<br/>
.p100 {width: 100%}</p>
  </div></div>
<a name="section0008"><h2>8. Tweet Skin Builder: No Coding Required</h2></a>
<div class="story"><div class="userstuff module">
    
    <p>Not everyone has the time, motivation, or leisure to learn how to code,
      much less construct a AO3 skin by hand.</p><p>That's why I built this user-friendly Tweet skin builder
      for the Twitter skin I created. It's a single page interface that lets you
      see your Tweet as you build it. It also generates the HTML you need to display it.
      No coding required.
    </p><p>
    
    </p><p>Features:</p>
<ul>
      <li>Has all the features documented in this work (images, quote retweets, polls, etc.)</li>
    	<li>Easy to use form that works for both mobile and desktop</li>
      <li>Generates HTML code into the fics that will work upon pasting</li>
    </ul><p>Limitations:</p>
<ul>
    	<li>You cannot save the tweets you make on the site</li>
      <li>You must provide your own image URLs for any embedded images and avatars.
        Please refer to AO3's suggestions on where to host your own images or google it.</li>
    	<li>The code will not be as neatly organized, and there will be extra span tags.</li>
    </ul><p>This skin builder is a work in progress, so feedback is always appreciated.
    Comments and support questions should be submitted in the comment box in this work.
    For more serious concerns like bugs, please <a href="https://github.com/ktddaeng/AO3TweetBuilder/issues">
      submit an issue in this project's github page.</a> Please read the
      <a href="https://github.com/gadaursan/AO3TweetBuilder/blob/master/CONTRIBUTING.md">contributing
    guidelines</a> first, though.</p>
<h4>
  <a href="https://gadaursan.github.io/AO3TweetBuilder/">Link to the AO3 Tweet Builder</a>
</h4>
  </div></div>
</body>
</html>